<template>
  <div class="contact">
    <!-- Hero Section -->
    <section class="hero relative h-[40vh] flex items-center justify-center text-white">
      <div class="absolute inset-0">
        <img
          src="https://images.unsplash.com/photo-1511818966892-d7d671e672a2"
          alt="联系我们"
          class="w-full h-full object-cover"
        />
        <div class="absolute inset-0 bg-black bg-opacity-50"></div>
      </div>
      <div class="relative text-center">
        <h1 class="text-5xl font-bold mb-4">联系我们</h1>
        <p class="text-xl max-w-2xl mx-auto">
          如果您有任何问题或建议，欢迎随时与我们联系
        </p>
      </div>
    </section>

    <!-- Contact Form Section -->
    <section class="py-20 bg-white">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
            <!-- Contact Information -->
            <div>
              <h2 class="text-3xl font-bold mb-8">联系方式</h2>
              <div class="space-y-6">
                <div class="flex items-start">
                  <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mr-4">
                    <i class="el-icon-location text-xl text-primary"></i>
                  </div>
                  <div>
                    <h3 class="text-lg font-semibold mb-2">地址</h3>
                    <p class="text-gray-600">
                      北京市朝阳区xxx街道xxx号
                    </p>
                  </div>
                </div>
                <div class="flex items-start">
                  <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mr-4">
                    <i class="el-icon-phone text-xl text-primary"></i>
                  </div>
                  <div>
                    <h3 class="text-lg font-semibold mb-2">电话</h3>
                    <p class="text-gray-600">
                      400-xxx-xxxx
                    </p>
                  </div>
                </div>
                <div class="flex items-start">
                  <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mr-4">
                    <i class="el-icon-message text-xl text-primary"></i>
                  </div>
                  <div>
                    <h3 class="text-lg font-semibold mb-2">邮箱</h3>
                    <p class="text-gray-600">
                      contact@example.com
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <!-- Contact Form -->
            <div>
              <h2 class="text-3xl font-bold mb-8">发送消息</h2>
              <el-form
                ref="formRef"
                :model="form"
                :rules="rules"
                label-position="top"
                class="space-y-6"
              >
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="form.name" placeholder="请输入您的姓名" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="form.email" placeholder="请输入您的邮箱" />
                </el-form-item>
                <el-form-item label="主题" prop="subject">
                  <el-input v-model="form.subject" placeholder="请输入消息主题" />
                </el-form-item>
                <el-form-item label="消息" prop="message">
                  <el-input
                    v-model="form.message"
                    type="textarea"
                    :rows="6"
                    placeholder="请输入您的消息"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    class="w-full"
                    :loading="loading"
                    @click="handleSubmit"
                  >
                    发送消息
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Map Section -->
    <section class="h-[400px]">
      <div class="w-full h-full">
        <!-- 这里可以集成地图组件，比如高德地图或百度地图 -->
        <div class="w-full h-full bg-gray-200 flex items-center justify-center">
          <p class="text-gray-500">地图加载中...</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)
const loading = ref(false)

const form = reactive({
  name: '',
  email: '',
  subject: '',
  message: ''
})

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: '请输入消息主题', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  message: [
    { required: true, message: '请输入消息内容', trigger: 'blur' },
    { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
  ]
}

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    loading.value = true

    // 这里添加发送消息的逻辑
    await new Promise(resolve => setTimeout(resolve, 1000))

    ElMessage.success('消息发送成功！')
    form.name = ''
    form.email = ''
    form.subject = ''
    form.message = ''
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.contact {
  overflow-x: hidden;
}

.hero {
  margin-top: -64px; /* 抵消导航栏的高度 */
}
</style> 